// include styles
import "~/rodal/lib/rodal.css";
import * as React from "react";
import { List, Checkbox, Button } from "antd-mobile";
import "./index.scss";
import Rodal from "rodal";
const CheckboxItem = Checkbox.CheckboxItem;
export default (props) => {
  const [visible, 
    // changevisible
  ] = React.useState(false);
  // const show = () => {
  //   changevisible(true);
  // };

  // const hide = () => {
  //   changevisible(false);
  // };
  
  const { node } = props;
  const datasource = node.data.get("datasource");
  const labelText = node.data.get("label");
  return (
    <div className="formitem" {...props}>
      <label 
      // onClick={() => show()}
      >{labelText || "labelText"}</label>
      <Rodal
        width={90}
        height={100}
        measure="vw"
        visible={visible}
        onClose={() => {}}
      >
        <Checkboxgroup options={datasource.value} />
        <Button 
        // onClick={() => hide()}
         type="primary">确认</Button>
      </Rodal>
    </div>
  );
};

class Checkboxgroup extends React.Component {
  render() {
    const { options, onChange, value } = this.props;
    return (
      <List style={{ paddingTop: "5vh" }}>
        {options.map((option) => (
          <CheckboxItem
            key={option}
            onChange={() => {
              const index = value.findIndex((element) => element === option);
              if (index > -1) {
                value.splice(index, 1);
                onChange(value);
              } else {
                onChange([...value, option]);
              }
            }}
          >
            {option}
          </CheckboxItem>
        ))}
      </List>
    );
  }
}
